<!--
 * @Author: 黑白灰01 3193273703@qq.com
 * @Date: 2025-01-27 18:20:38
 * @LastEditors: 黑白灰01 3193273703@qq.com
 * @LastEditTime: 2025-01-30 17:52:23
 * @FilePath: /hei_picture_web/src/page/picture_add/AddPic.vue
 * @Description: 图片添加
-->
<template>
  <div class="picture-add-page">
    <div class="picture-add-page-title">
      {{ pictureId ? '修改图片' : '创建图片' }}
    </div>
    <UploadTempture :picture="picture" :on-success="handleUploadSuccess" />
    <div class="picture-add-form-container" v-if="picture">
      <h3 class="picture-add-form-title">图片信息</h3>
      <a-form
        name="pictureForm"
        class="picture-add-form"
        layout="vertical"
        :model="pictureForm"
        @finish="handleSubmit"
      >
        <a-form-item name="name" label="名称">
          <a-input v-model:value="pictureForm.name" :placeholder="'请输入名称'" />
        </a-form-item>
        <a-form-item name="introduction" label="简介">
          <a-textarea
            v-model:value="pictureForm.introduction"
            :placeholder="'请输入简介'"
            :auto-size="{ minRows: 2, maxRows: 5 }"
          />
        </a-form-item>
        <a-form-item name="category" label="分类">
          <a-auto-complete
            v-model:value="pictureForm.category"
            :placeholder="'请输入分类'"
            :options="categoryOptions"
          />
        </a-form-item>
        <a-form-item name="tags" label="标签">
          <a-select
            v-model:value="pictureForm.tags"
            mode="tags"
            :placeholder="'请输入标签'"
            :options="tagOptions"
          />
        </a-form-item>
        <a-form-item>
          <a-button type="primary" html-type="submit" style="width: 100%">
            {{ pictureId ? '修改' : '创建' }}
          </a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import UploadTempture from './modal/UploadTempture.vue'
import { onMounted, ref, reactive } from 'vue'
import { editPictureUsingPut, listPictureTagCategoryUsingGet } from '@/api/pictureController'
import { message } from 'ant-design-vue'
import { useRouter, useRoute } from 'vue-router'
import { getPictureByIdUsingGet } from '@/api/pictureController'
const router = useRouter()
const route = useRoute()
const pictureId = ref<string | undefined>(route.query?.id as string)
const picture = ref<API.PictureVO>()
const handleUploadSuccess = (newPicture: API.PictureVO) => {
  picture.value = newPicture
  pictureForm.name = newPicture.name
  pictureForm.introduction = newPicture.introduction
  pictureForm.category = newPicture.category
  pictureForm.tags =
    typeof newPicture.tags === 'string' ? JSON.parse(newPicture.tags) : newPicture.tags
}
const pictureForm = reactive<API.PictureEditRequest>({
  name: '',
  introduction: '',
  category: '',
  tags: [],
})
const categoryOptions = ref<{ value: string; label: string }[]>([])
const tagOptions = ref<{ value: string; label: string }[]>([])
/**
 * 获取标签和分类选项
 * @param values
 */
const getTagCategoryOptions = async () => {
  const res = await listPictureTagCategoryUsingGet()
  if (res.data.code === 200 && res.data.data) {
    tagOptions.value = (res.data.data.tagList ?? []).map((data: string) => ({
      value: data,
      label: data,
    }))
    categoryOptions.value = (res.data.data.categoryList ?? []).map((data: string) => ({
      value: data,
      label: data,
    }))
  } else {
    message.error('获取标签分类列表失败，' + res.data.message)
  }
}
const handleSubmit = async (values: API.PictureVO) => {
  const pictureId = picture.value?.id
  if (!pictureId) {
    return
  }
  const res = await editPictureUsingPut({
    id: pictureId,
    ...values,
  })
  // 操作成功
  if (res.data.code === 200 && res.data.data) {
    message.success(`${pictureId ? '修改' : '创建'}成功,已提交到审核员审核`)
    // todo 页面跳转
    router.push('/')
  } else {
    message.error('创建失败，' + res.data.message)
  }
  console.log(res)
}
// 获取老数据
const getOldPicture = async () => {
  if (pictureId.value) {
    const res = await getPictureByIdUsingGet({
      id: pictureId.value,
    })
    if (res.data.code === 200 && res.data.data) {
      const data = res.data.data
      // Convert tags to string[] before assigning to picture.value
      picture.value = {
        ...data,
        userId: data.userId,
        tags: JSON.parse(data.tags ?? '[]'),
      }
      pictureForm.name = data.name
      pictureForm.introduction = data.introduction
      pictureForm.category = data.category
      pictureForm.tags = JSON.parse(data.tags ?? '[]')
    }
  }
}
onMounted(() => {
  if (pictureId.value) {
    getOldPicture()
  }
  getTagCategoryOptions()
})
</script>

<style scoped lang="scss">
.picture-add-page {
  max-width: 1024px;
  width: 100%;
  margin: 0 auto;
  .picture-add-page-title {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 24px;
    text-align: center;
  }
  .picture-add-form-container {
    width: 100%;
    max-width: 648px;
    margin: 0 auto;
    .picture-add-form-title {
      font-size: 24px;
      font-weight: 600;
      margin-bottom: 24px;
      text-align: center;
    }
    .picture-add-form {
      .ant-form-item {
        margin-bottom: 16px;
      }
    }
  }
}
</style>
